<!doctype html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="chrome=1">
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
  <style type="text/css">
    body,
    html,
    #container {
      height: 100%;
      margin: 0px;
    }
  </style>
  <title>快速入门</title>
</head>

<body>
  <div id="container" tabindex="0"></div>
  <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=b63b44b4dd2755ae0bfd6ef5044face8"></script>
  <script type="text/javascript">
    // 方式一
    // var defaultLayer = new AMap.TileLayer();
    // var traffic = new AMap.TileLayer.Traffic();
    // var map = new AMap.Map('container', {
    //   zoom: 10,
    //   layers: [
    //     defaultLayer, //默认图层
    //     traffic //实时交通图层
    //   ],
    //   center: [116.39, 39.9]
    // });
    // 方式二：
    var defaultLayer = new AMap.TileLayer();
    var traffic = new AMap.TileLayer.Traffic();
    var map = new AMap.Map('container', {
      zoom: 10,
      center: [116.39, 39.9]
    });
    traffic.setMap(map);
  </script>
</body>

</html>
